<template>
  <div class="version-list full-height bg-white" v-if="show">
    <div class="file-list-head row no-wrap bg-primary text-white">
      <span class="file-list-path">版本履历：{{curFile.label}}</span>
      <q-space></q-space>
      <q-icon name="iconfont icontubiao-58" class="icon" @click="hideDialog">
        <q-tooltip>返回</q-tooltip>
      </q-icon>
      <q-icon name="iconfont icontubiao-34" class="icon" @click="getVersionList">
        <q-tooltip>刷新</q-tooltip>
      </q-icon>
    </div>
    <div class="list-content drop-target">
      <div class="full-height">
        <q-table class="list-content table-file" :pagination="{rowsPerPage: 0}" no-data-label="暂无数据"
                 :data="files" :columns="columns" row-key="id" hide-bottom>
          <template v-slot:body="props">
            <q-tr :props="props"
                  :class="{'active': actFile[props.row.hash]}"
                  @contextmenu.native.stop="selFile(props.row)"
                  @click.native.stop="selFile(props.row)">
              <q-td key="label" :props="props">
                <q-icon class="vertical-middle" name="img:statics/svg/paper-icon.svg" style="font-size:18px;"/>
                <span class="margin-l-10 name ellipsis">{{ props.row.sourceName }}</span>
              </q-td>
              <q-td key="type" :props="props">{{ props.row.type }}</q-td>
              <q-td key="version" :props="props">V{{ props.row.id }}</q-td>
              <q-td key="people" :props="props">{{ props.row.operationBy }}</q-td>
              <q-td key="time" :props="props">{{ props.row.operationDateTime }}</q-td>
              <q-menu :ref="'menu'+props.row.id" touch-position context-menu>
                <q-list dense style="min-width: 150px">
                  <q-item clickable v-close-popup @click="lookFile(props.row)">
                    <q-item-section>查看</q-item-section>
                  </q-item>
                  <q-item v-if="props.row.index !== files.length - 1" clickable v-close-popup
                          @click="compareNextVersion(props.row)">
                    <q-item-section>对比前一版本</q-item-section>
                  </q-item>
                  <q-item v-if="files.length > 1" clickable>
                    <q-item-section>对比历史版本</q-item-section>
                    <q-menu anchor="top right" self="top left">
                      <q-list style="min-width: 100px">
                        <q-item v-for="(file,fileIndex) in files" :key="fileIndex" v-show="file.id!==props.row.id"
                                dense clickable @click="compareVersion(props.row, file)">
                          <q-item-section>V{{file.id}}</q-item-section>
                        </q-item>
                      </q-list>
                    </q-menu>
                  </q-item>
                  <q-item v-if="props.row.index !== 0" clickable v-close-popup @click="recover(props.row)">
                    <q-item-section>恢复</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-tr>
          </template>
        </q-table>
      </div>
    </div>
    <!--  文件内容编辑插件-->
    <code-edit ref="codeEdit" :value="fileContent" :name="curFile.label" decode=""
               :path="curFile.path" state="look"></code-edit>
    <!--  文件内容对比查看-->
    <code-merge ref="codeMerge"></code-merge>
  </div>
</template>

<script>
import { getVersionList, readFileVersionContent, changeVersion } from 'src/boot/program/cloud'
import { matchFileType } from 'src/assets/js/util'
import CodeEdit from 'src/components/code-edit/index'
import CodeMerge from 'src/components/code-merge'
import axios from 'axios'

export default {
  name: 'version-list',
  props: {
    versionFile: {
      type: Object
    }
  },
  data () {
    return {
      show: false,
      // 当前文件
      curFile: {
        path: '',
        label: '',
        isFile: true
      },
      // 列表的头部
      columns: [
        { name: 'label', align: 'left', label: '文件名', field: 'label', style: 'width: 35%' },
        { name: 'type', align: 'left', label: '操作类型', field: 'type' },
        { name: 'version', align: 'left', label: '版本', field: 'version' },
        { name: 'people', align: 'left', label: '操作人', field: 'people' },
        { name: 'time', align: 'left', label: '操作时间', field: 'time' }
      ],
      files: [], // 列表数据
      fileContent: null, // 文件内容
      actFile: {} // 选中的文件
    }
  },
  methods: {
    // 显示版本履历
    showDialog (file) {
      this.show = true
      this.curFile = file
      this.getVersionList()
    },
    // 隐藏版本履历
    hideDialog () {
      this.show = false
      this.files = []
    },
    // 获取版本列表
    getVersionList () {
      getVersionList(this.curFile.path).then(res => {
        this.files = this.initInfo(res.data)
      })
    },
    initInfo (info) {
      const data = info.map((item, index) => {
        return {
          index,
          ...item
        }
      })
      return data
    },
    // 验证文件大小是否超过5M
    testFileSize (file) {
      if (file.size > 5 * 1024 * 1024) {
        this.errMessage('文件超过5M暂不支持查看！')
        return false
      }
      return true
    },
    // 浏览版本
    lookFile (file) {
      if (matchFileType(file.sourceName)) {
        this.errMessage('无法查看图片文件、word文件、视频文件、音频文件、快捷方式、压缩文件！')
        return
      }
      if (!this.testFileSize(file)) return
      if (!this.testFileSize(file)) return
      readFileVersionContent(file.hash).then(res => {
        this.fileContent = res.data
        this.$refs.codeEdit.showDialog()
      })
    },
    // 恢复版本
    recover (file) {
      let params = {
        realpath: this.curFile.path,
        version: file.hash
      }
      changeVersion(params).then(res => {
        this.$q.dialog({
          title: `<p class="dialog-notice-title">
<i class="iconfont icontubiao-53" ></i> 文件${this.curFile.label}已恢复成版本V${file.id}</p>`,
          html: true,
          ok: {
            unelevated: true,
            label: '确认'
          }
        })
        this.getVersionList()
      })
    },
    // 对比前一版本
    compareNextVersion (file) {
      if (matchFileType(file.sourceName)) {
        this.errMessage('无法查看图片文件、word文件、视频文件、音频文件、快捷方式、压缩文件！')
        return
      }
      if (matchFileType(this.files[file.index + 1].sourceName)) {
        this.errMessage('无法查看图片文件、word文件、视频文件、音频文件、快捷方式、压缩文件！')
        return
      }
      if (!this.testFileSize(file)) return
      if (!this.testFileSize(this.files[file.index + 1])) return
      axios.all([readFileVersionContent(file.hash), readFileVersionContent(this.files[file.index + 1].hash)])
        .then(axios.spread((curRes, nextRes) => {
          let content1 = {
            title: file.sourceName + '(V' + file.id + ')',
            content: curRes.data
          }
          let content2 = {
            title: this.files[file.index + 1].sourceName + '(V' + this.files[file.index + 1].id + ')',
            content: nextRes.data
          }
          this.$refs.codeMerge.showDialog(content1, content2)
        }))
    },
    // 对比两个版本
    compareVersion (curFile, compareFile) {
      if (matchFileType(curFile.sourceName)) {
        this.errMessage('无法查看图片文件、word文件、视频文件、音频文件、快捷方式、压缩文件！')
        return
      }
      if (matchFileType(compareFile.sourceName)) {
        this.errMessage('无法查看图片文件、word文件、视频文件、音频文件、快捷方式、压缩文件！')
        return
      }
      if (!this.testFileSize(curFile)) return
      if (!this.testFileSize(compareFile)) return
      axios.all([readFileVersionContent(curFile.hash), readFileVersionContent(compareFile.hash)])
        .then(axios.spread((curRes, nextRes) => {
          let content1 = {
            title: curFile.sourceName + '(V' + curFile.id + ')',
            content: curRes.data
          }
          let content2 = {
            title: compareFile.sourceName + '(V' + compareFile.id + ')',
            content: nextRes.data
          }
          this.$refs.codeMerge.showDialog(content1, content2)
        }))
    },
    // 失败提示
    errMessage (message) {
      this.$q.dialog({
        title: `<p class="dialog-notice-title">
<i class="iconfont icontubiao-52" ></i> 提示</p>`,
        message: message,
        html: true,
        ok: {
          unelevated: true,
          label: '确认'
        }
      })
    },
    // 选中文件
    selFile (item) {
      let actFile = {}
      actFile[item.hash] = item.hash
      this.actFile = actFile
    }
  },
  components: {
    CodeEdit,
    CodeMerge
  }
}
</script>

<style scoped lang="stylus">
  .version-list {
    position absolute
    top 0
    left 0
    z-index 100
    width 100%

    .list-content {
      height calc(100% - 40px)
    }

    .table-file {
      max-height 100%
      height 100%

      .q-table__middle {
        max-height 100%
      }

      .active {
        background-color rgba(95, 119, 253, 0.2)
      }
    }
  }

  .file-list-head {
    padding 0 20px
    height 40px
    line-height 40px
    font-size 14px

    .icon {
      margin-top 10px
      margin-left 10px
      font-size 18px
    }
  }

  .text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-wrap: break-word;
  }
</style>
<style lang="stylus">
  .version-list {
    .table-file {
      .q-table__middle {
        max-height 100%
      }
    }
  }
</style>
